<template>
  <div>
    <van-nav-bar
        :title='Title'
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <!--    {{ DetailSongList.name }}-->
    <div class="main" ref="main">
      <!--   指针   -->
      <div class="Pointer" ref="Pointer">

      </div>
      <!--   唱片   -->
      <div v-if="isLyrics" class="record" ref="record">
        <!--    唱片封面    -->
        <img :src="imgUrl">
      </div>
      <!--   歌词   -->
      <LyricsList v-if="!isLyrics && lyrics" :lyrics="lyrics"/>

      <ControlPanel :isshow="isshow" @changeBegin="control"  />
      <audio :src="url" ref="myAudio"></audio>


    </div>
  </div>

</template>

<script>


import {getDetailSong, getLyrics} from "@/api/index-api";
import LyricsList from "@/views/play/components/LyricsList";
import ControlPanel from "@/views/play/components/ControlPanel";

export default {
  name: "PlayPage",
  props: {},
  data() {
    return {
      url: '',
      DetailSongList: null,
      Title: "1",
      imgUrl: '',
      isshow: true,
      isLyrics: true,
      lyrics: null,
    }
  },

  created() {

    this.url = ` https://music.163.com/song/media/outer/url?id=${this.$route.query.id}.mp3`
    //  获取歌曲详情
    getDetailSong(this.$route.query.id).then((res) => {

      this.DetailSongList = res.songs[0]
      this.Title = this.DetailSongList.name
      //图片链接
      this.imgUrl = this.DetailSongList.al.picUrl
      // 模糊背景图片
      this.$refs.main.style.backgroundImage = 'url(' + this.imgUrl + ')'
    })
    //  获取歌词
    getLyrics(this.$route.query.id).then(res => {
      if (res.code === 200) {
        this.lyrics = res.lrc.lyric
      }
    })

  },
  components: {
    LyricsList,
    ControlPanel
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    control(data) {
      this.isshow = data
      console.log(this.data)

      if (data) {
        this.$refs.myAudio.play()
      } else {
        this.$refs.myAudio.pause()
      }
    },

    //暂停
    // begin() {
    //   this.$refs.record.style.animationPlayState = 'paused'
    //   this.$refs.Pointer.style.transform = 'rotate(-15deg)'
    //   this.isshow = false
    //   // this.$refs.myAudio.play()
    // },
    //开始
    // paush() {
    //   this.$refs.record.style.animationPlayState = 'running'
    //   this.$refs.Pointer.style.transform = 'rotate(0deg)'
    //   this.isshow = true
    // }
  },
  Update() {
    if (this.isshow) {
      this.$refs.record.style.animationPlayState = 'running'
      this.$refs.Pointer.style.transform = 'rotate(0deg)'

    } else {
      this.$refs.record.style.animationPlayState = 'paused'
      this.$refs.Pointer.style.transform = 'rotate(-15deg)'
    }
  }

}
</script>

<style scoped lang="less">


.main {
  //display: flex;

  width: 100%;
  //margin: 0px 10px;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  //filter: blur(5px);
  border-top: 1px solid #dddddd;
  height: 600px;
  position: relative;
  //overflow: hidden;
  z-index: -2;

  //&:after {
  //  content: "";
  //  width: 100%;
  //  height: 100%;
  //  position: absolute;
  //  left: 0;
  //  top: 0;
  //  background: inherit;
  //  filter: blur(30px);
  //  z-index: 0;
  //}

  //唱片
  .record {
    margin: 60px auto 30px;
    width: 260px;
    height: 260px;
    position: relative;
    background-image: url("../../../public/img/blackCircle.png");
    background-repeat: no-repeat;
    background-size: 100%;
    animation: rolate 8s infinite linear;
    z-index: 1;

    img {
      width: 161px;
      height: 161px;
      border-radius: 50%;
      position: absolute;
      top: 49px;
      left: 50px;
      z-index: 1;
    }
  }

  @keyframes rolate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  //指针
  .Pointer {
    width: 80px;
    height: 150px;
    background-image: url("../../../public/img/needle-ip6.png");
    background-repeat: no-repeat;
    background-size: 100%;
    transition: transform 1s ease;
    transform-origin: left top;
    transform: rotate(0deg);
    z-index: 2;
    position: absolute;
    left: 175px;

  }
  .ControlPanel{
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1001;
  }

}

</style>